import {
    mapState
} from 'vuex'
import {
    getParamsApi,
    updateParamsApi,
    delAttrApi
} from '@/api/params'
import EditParams from './components/edit-params.vue'
export default {
    components: {
        EditParams
    },
    data() {
        return {
            // 级联菜单的数据(一、二、三都需要)
            // cateList: [],
            // 级联菜单的配置项
            cateProps: {
                expandTrigger: 'hover',
                checkStrictly: true,
                value: 'cat_id',
                label: 'cat_name'
            },
            // 选中的选项数组
            selectedKeys: [],
            // 激活的选项卡
            activeName: 'many', // 默认为many,代表动态参数
            // 动态参数
            manyData: [],
            // 静态属性
            onlyData: []
        }
    },
    computed: {
        // 从vuex中获取分类数据
        ...mapState('cate', ['allCateTreeList']),
        // 计算出选择的三级分类id
        cat_id() {
            return this.selectedKeys.length === 3 ? this.selectedKeys[2] : ''
        },
        // 控制添加按钮是否被禁用
        buttonDisabled() {
            if (this.selectedKeys.length === 3) {
                return false
            } else {
                return true
            }
        }
    },
    methods: {
        // 级联菜单选项改变时触发
        handleChanged() {
            // 获取静态属性和动态参数
            this.getParams()

            // 关闭级联菜单
            this.$refs.cateHandle.dropDownVisible = false
        },
        // 获取参数或者属性
        async getParams() {
            if (this.selectedKeys.length !== 3) {
                this.selectedKeys = []
                this.manyData = []
                this.onlyData = []

                // 关闭级联菜单
                this.$refs.cateHandle.dropDownVisible = false
                this.$message.error('请选择三级分类')
                return
            }

            const res = await getParamsApi(this.cat_id, this.activeName)
            if (res.meta.status !== 200) return this.$message.error('获取数据失败')

            // 数据处理
            res.data.forEach(item => {
                // 将属性值由,分割的字符串转换为数组方便进行遍历
                /*  if (item.attr_vals) {
                     item.attr_vals = item.attr_vals.split(',')
                 } else {
                     item.attr_vals = []
                 } */
                item.attr_vals = item.attr_vals ? item.attr_vals.split(',') : []

                // 添加控制input框显示和隐藏的选项
                item.inputVisible = false

                // 添加接收input输入框值的数据
                item.inputValue = ''
            })

            // 获取动态参数和静态属性
            if (this.activeName === 'many') {
                this.manyData = res.data
            } else {
                this.onlyData = res.data
            }
        },
        // tab选项卡切换触发
        handleClick() {
            // 获取对应的tab栏的数据
            this.getParams()
        },
        // 点击按钮显示输入的文本框
        showInput(row) {
            // 显示文本输入框
            row.inputVisible = true

            // 获取焦点
            this.$nextTick(() => {
                this.$refs.saveTagInput.$refs.input.focus()
            })
        },
        // 处理esc和失去焦点
        handleCancel(row) {
            row.inputVisible = false
            row.inputVisible = ''
        },
        // 按回车实现标签的添加
        addTag(row) {
            if (row.inputValue.trim().length === 0) {
                row.inputVisible = false
                row.inputVisible = ''
                return
            }
            // 唯一性验证
            if (row.attr_vals.includes(row.inputValue)) {
                row.inputValue = ''
                return this.$message.error('属性名已经存在')
            }

            row.attr_vals.push(row.inputValue)

            // 调用数据库的操作
            this.saveTag(row)

            // 让input输入框隐藏
            row.inputVisible = false
            row.inputValue = ''
        },
        // 删除属性值
        async delTag(row, index) {
            // 弹窗提示用户是否要删除
            const confirmResult = await this.$confirm(
                '请问是否要删除该选项吗?',
                '删除提示', {
                    confirmButtonText: '确认删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).catch(err => err)
            if (confirmResult !== 'confirm') {
                return this.$message.info('已经取消删除')
            }
            row.attr_vals.splice(index, 1)

            // 数据库的更新操作
            this.saveTag(row)
        },
        // 数据库的更新操作
        async saveTag(row) {
            const submitData = {
                catId: row.cat_id,
                attrId: row.attr_id,
                attrName: row.attr_name,
                attrVals: row.attr_vals.join(','),
                attrSel: row.attr_sel
            }
            const res = await updateParamsApi(submitData)
            if (res.meta.status !== 200) return this.$message.error('更新属性失败')
            this.$message.success('更新属性成功')
        },
        // 打开添加属性的对话框
        // row里面只有cat_id和attr_sel两个选项
        showAddDialog(row) {
            this.$refs.editParamsRef.openDialog(row)
        },
        // 打开编辑属性的对话框
        // row里面是一条完整的数据，有cat_id,attr_id,attr_name,attr_sel
        showEditDialog(row) {
            this.$refs.editParamsRef.openDialog(row)
        },
        // 处理添加或者编辑属性名称后的回调处理
        editAttrNameHandle() {
            // 重新获取属性数据
            this.getParams()
        },
        // 删除属性
        async delAttr(row) {
            // 弹窗提示用户是否要删除
            const confirmResult = await this.$confirm(
                '请问是否要删除该选项吗?',
                '删除提示', {
                    confirmButtonText: '确认删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).catch(err => err)
            if (confirmResult !== 'confirm') {
                return this.$message.info('已经取消删除')
            }
            const res = await delAttrApi({
                catId: row.cat_id,
                attrId: row.attr_id
            })
            if (res.meta.status !== 200) return this.$message.error('删除失败')
            this.$message.success('删除成功')
            this.getParams()
        }
    }
}